<template>
  <div class="full-width">
    <!-- <span v-if="options.length == 0">暂无选项</span> -->
    <van-field
      :readonly="readonly"
      :disabled="disabled"
      name="picker"
      :required="required || require"
      :value="getLabel(options, value)"
      :placeholder="placeholder ? placeholder : '请选择' + title"
      @click="showControl"
    />
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="options"
        @confirm="onConfirm($event)"
        @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>
<script>
import { option } from "yargs";

export default {
  name: "FormVantSelect",
  props: {
    value: {
      type: Number,
      default: null
    },
    title: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: "input"
    },
    placeholder: {
      type: String,
      default: ""
    },
    readonly: {
      type: Boolean,
      default: false
    },
    required: {
      type: Boolean,
      default: false
    },
    require: {
      type: Boolean,
      default: false
    },
    options: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      showPicker: false
    };
  },
  methods: {
    onConfirm(value) {
      if (typeof value == "object") {
        this.$emit("input", value.value);
      } else {
        this.$emit("input", value);
      }
      this.showPicker = false;
    },
    showControl() {
      if (this.disabled || this.readonly) {
        return;
      } else {
        this.showPicker = true;
      }
    },
    getLabel(list, value) {
      let label = "";
      if (list && list.length) {
        list.forEach(e => {
          if (typeof e == "object") {
            if (Number(e.value) == Number(value)) {
              label = e.label;
            }
          } else {
            label = value;
          }
        });
      } else {
        label = value;
      }
      return label;
    }
  }
};
</script>
